
<template>
  <Echart :options="option" class="right_top_inner" ref="charts" />
</template>

<script>
import { graphic } from "echarts"
export default {
  props: ['jld'],
  data() {
    return {
      option: {},
    };
  },
  watch: {
    jld: {
      handler(newValue, oldValue) {
        this.init()
      },
      deep: true
    }
  },
  methods: {
    init() {
      let self = this
      console.log(self.jld.name);
      this.option = {
        legend: {
          x: 'center',      //可设定图例在左、右、居中
          y: '10px',
          data: [self.jld.name],
          textStyle: {
            fontSize: 12,
            color: '#F1F1F3'
          }
        },
        xAxis: {
          type: "category",
          data: self.jld.xData,
          // boundaryGap: false, // 不留白，从原点开始
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(31,99,163,.2)",
            },
          },
          axisLine: {
            // show:false,
            lineStyle: {
              color: "rgba(31,99,163,.1)",
            },
          },
          axisLabel: {
            color: "#7EB7FD",
            fontWeight: "500",
          },
        },
        yAxis: {
          min: 0,
          max: 1000,
          name: "单位：V",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12,
          },
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(31,99,163,.2)",
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(31,99,163,.1)",
            },
          },
          axisLabel: {
            color: "#7EB7FD",
            fontWeight: "500",
          },
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
          formatter: function (params) {
            return params.name + " " + params.value + "V";
          },
        },
        grid: {
          //布局
          show: true,
          left: "30px",
          right: "30px",
          bottom: "10px",
          top: "48px",
          containLabel: true,
          borderColor: "#1F63A3",
        },
        series: [
          {
            data: self.jld.yData,
            type: "bar",
            barWidth: 15,
            name: self.jld.name,
            symbol: "none", //去除点
            // color: "rgba(252,144,16,.7)",
            itemStyle: {
              //右，下，左，上
              color: new graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(14, 236, 228, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(5, 143, 231, 1)",
                  },
                ],
                false
              ),
            }
          },
        ],
      };
    },
  },
};
</script>
<style lang='scss' scoped>
.right_top_inner {
  margin-top: -8px;
}
</style>